<template>
  <!-- tabcontainer -->
  <div class="manege">
   <headTop></headTop>
    <div>

      <ul>

        <li v-for="(item,index) in SearchProduct.Result" >
          <div class="breviary clearfix" @click="toDetails"><img src="~src/images/details.png" alt=""></div>
          <div class="details ">
            <h2 class="title">{{item.Theme}}</h2>
            <div class="counte">
              <div>浏览{{item.ClickCount}}次</div>
              <div>分享{{item.ShareCount}}次</div>
              <div>已报名{{item.ActivityApplyCount}}次</div>
            </div>
            <div class="event">
              <div class="manage" v-on:click="handleClick($event,item.ActivityID,index,item.Status).stop" v-bind:data-ActivityID="item.ActivityID" v-bind:data-Status="item.Status" ref="ActivityID">活动管理</div>
              <div class="apply" v-on:click="tabDiv().stop" v-if="item.Status==0" v-bind:data-ActivityID="item.ActivityID">报名表</div>
              <div class="states">{{item.PublishStatus==0 ? '未发布':'已发布'}}</div>
            </div>
            <div>
            </div>
          </div>

        </li>
       

      </ul>

    </div>

    <router-link to="event_publish" class="add_btn iconfont icon-tianjia "></router-link>

    <mt-popup v-model="popupVisible" popup-transition="popup-fade">
      <div class="choice">
        <div class="bb" @click="apply" >{{SearchProduct.Result[this.index].ApplyStatus ?'开始报名':'停止报名' }}</div>
        <div class="bb"  @click="changeEvent">编辑活动</div>

        
        <div class="bb" @click="publish">{{SearchProduct.Result[this.index].PublishStatus? '发布活动':'关闭活动'  }}</div>
        <div class="" @click="deleteEvent">删除活动</div>
      </div>
    </mt-popup>

    <mt-popup v-model="tabModel" popup-transition="popup-fade" class="apply">
      <div class="choice">
        <router-link class="bb" to="sign_in">
          签到二维码
        </router-link>
        <router-link class="bb" to="user_join">
          扫描观众二维码
        </router-link>
        <router-link class="bb" to="user_join">
          活动报名表
        </router-link>
        <router-link class="bb" to="award_list">
          活动奖励名单
        </router-link>
      </div>
    </mt-popup>
 
  </div>
</template>  
  
<script>  
//  import { SearchProduct } from 'src/servise/getData'; // 模拟数据 已注释 可以打开
//  import { SearchProduct } from 'src/testData/SearchProduct'
 import { SearchProduct }  from 'src/servise/getData'
import { UpdateActivitiesApplyStatus }  from 'src/servise/getData'
import { DeleteActivities }  from 'src/servise/getData'
import { UpdateActivitiesPublishStatus }  from 'src/servise/getData'

import { Toast } from 'mint-ui'


  import headTop from 'src/components/action_btn/action_btn'
  import Qs from 'Qs';
export default {

     components: {
            headTop,
            
        },
  data() {
    return {
      popupVisible: false,
      tabModel: false,
      SearchProduct:SearchProduct,
      state:'',
      ActivityID:'',   //点击的时候记录了活动id
      applyState:'',
      index:0,
      Status:'',
      
    }
  },

  created(){
     console.log(SearchProduct)

      //  this.SearchProduct=SearchProduct; 

      //  请求已写好 下次放出来
       this.$http.get(SearchProduct,Qs.stringify({keyword:'',pageIndex:1,pageSize:10})).then((res)=>{
         console.log(res.data)
         this.SearchProduct=res.data;

         
       })
    

    //   let sendData= { "keyword": "", "pageIndex": 1, "pageSize": 10 };
    //   let that=this;
    //   this.$http.get(SearchProduct,sendData).then((res) =>
    //     console.log(res)
    // ) 
  },
  methods: {
   
    //点击记录活动id
    handleClick(event,ActivityID,index,Status) {
      this.popupVisible = true;
      this.ActivityID=ActivityID;
      this.index=index;
      this.Status=Status;
      console.log ( Status+'Status')
      console.log ( this.SearchProduct.Result[index].ApplyStatus)
    },
    //点击开启报名和关闭报名
     apply(){
     
        let transfer = this.SearchProduct.Result[this.index].ApplyStatus==0?1:0;
        console.log(transfer)
     
      this.$http.post(UpdateActivitiesApplyStatus,Qs.stringify({ "activityID":this.ActivityID, "applyStatus":transfer })).then((res) =>{

 console.log(this.ActivityID)
        console.log(res)
     if(res.data.ErrorCode==0){
        this.SearchProduct.Result[this.index].ApplyStatus==0?this.SearchProduct.Result[this.index].ApplyStatus=1:this.SearchProduct.Result[this.index].ApplyStatus=0;
        Toast({
              message: '操作成功',
              position: 'middle',
              duration: 800
            })
     }else{
         Toast({
              message: '网络出现问题',
              position: 'middle',
              duration: 800
            })
     }

      })
  
  
    },
    tabDiv() {
      console.log(12)
      this.tabModel = true
    },
    //发布活动
    publish(){

   
      let statusif=this.SearchProduct.Result[this.index].PublishStatus==0?statusif=1:statusif=0;
      console.log(this.SearchProduct.Result[0].PublishStatus+'now')
       console.log(this.ActivityID)
      this.$http.post(UpdateActivitiesPublishStatus,Qs.stringify({activityID:this.ActivityID,publishStatus:statusif})).then((res)=>{
        console.log(res)
             if(res.data.ErrorCode==0){
        this.SearchProduct.Result[this.index].PublishStatus==0?this.SearchProduct.Result[this.index].PublishStatus=1:this.SearchProduct.Result[this.index].PublishStatus=0;
        this.popupVisible=false;
          Toast({
              message: '操作成功',
              position: 'middle',
              duration: 800
            })
        }else{
          this.popupVisible=false;
              Toast({
              message: '网络出现问题',
              position: 'middle',
              duration: 800
            })

          }
      })
  
    },
    //删除活动
    deleteEvent(){
      console.log(this.ActivityID)
     this.$http.post(DeleteActivities,Qs.stringify({Id:this.ActivityID})).then((res)=>
     {console.log(res.data.ErrorCode)
         if(res.data.ErrorCode==0){
        console.log( this.SearchProduct.Result.length+'one')
        this.SearchProduct.Result.splice(this.index,1);
        console.log( this.SearchProduct.Result.length+'two')
        this.popupVisible=false;
              Toast({
        message: '删除成功',
        position: 'middle',
        duration: 800
      });
     }else{
       Toast({
        message: '网络出现问题',
        position: 'middle',
        duration: 800
      })
     }
     
     })
 

    },

    changeEvent(){
    
      this.$router.push({ path: '/change_event'})
    },

    toDetails(){
         this.$router.push({ path: '/event_details'})
    }
  }
}

</script>  
<style lang="stylus" scoped>
     @import './icon/iconfont.css';
    .mint-navbar .mint-tab-item.is-selected{
      border none
    }
    .mint-tab-item-label {
        font-size: 0.3623rem;
    }
    .mint-tab-container
      background-color #fff
   
    ul
     li 
       display flex
       flex-flow row
       padding 0.2415rem 0.3623rem
       border-bottom 0.0242rem solid #DDDDDD
       position relative 
       background-size 100% 100%
       .breviary
         width 2.4155rem
         height 2.4155rem
         img
            width 100%
            height 2.4155rem
            border 0.0242rem solid #ddd
       .details
          flex  1
          padding-left  0.2899rem
          h2
            font-size 0.3382rem
            padding-right 0.3382rem
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            height: 1.087rem;
          .counte
            display flex
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            height 0.6039rem
            
            div
              flex 1
              font-size 0.314rem
              color #999999
 
        .event
          display flex
          margin-top 0.1208rem
          position relative
          div
            height 0.6039rem
            width 1.9324rem
            background-color #2A96F5
            font-size 0.3382rem
            display flex
            justify-content center
            align-items center
            color #ffffff
            padding-top 1px

          .apply
            background-color #00C9C2
            margin-left 0.2657rem
           
            
          .state
            color #00C9C2
            font-size 0.3382rem
            flex 1
            display flex
            justify-content flex-end
            align-items center
            float right
            padding-right 0.2415rem
          .states
            background none
            color #00C9C2
            justify-content flex-end
            position absolute
            right 16px

    .bb
      border-bottom 0.0242rem solid #E5E5E5

    .add_btn
      display flex
      width 1.1rem
      height 1rem    
      justify-content center
      align-items center
      border-radius  0.6039rem
      font-size 50.0007px
      color #2A96F5
      padding-bottom 0.0966rem
      position fixed
      bottom 15%
      right 50%
      transform translateX(0.5314rem)
      background #ffffff
      z-index 99
    .choice
      
      margin 0 0.3623rem
      margin 0 auto
      
      div
        height 1.3285rem
        margin 0 auto
        color #333333
        font-size 0.4348rem
        display flex
        justify-content center
        align-items center
        background-color #ffffff
      div:last-child
        margin-top 0.1449rem

  .mint-popup
    z-index: 2003;
    width: 100%;
    padding: 0rem 0.3865rem
    margin-top: 28%;
    background none         
  .apply
    .choice
        a
          height 1.3285rem
          display block
          margin 0 auto
          color #333333
          font-size 0.4348rem
          display flex
          justify-content center
          align-items center
          background-color #ffffff         
        a:nth-child(3)
          margin-top 0.1449rem

.mint-popup {
    position: fixed;
    background: #fff;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: .2s ease-out;
    transition: .2s ease-out;
    width: 80%;
}
.schedule
  .sum
    height 82px
    text-align center





</style>

<style lang="stylus" >
  .mint-toast 
    padding 12px
    .mint-toast-text
      color #fff
      font-size 16px
 </style>